<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Bootstrap-alerts学习</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/select2.css">
    <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/js/select2.full.js"></script>
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <script type="text/javascript" src="/js/pagejs/bootstrap/bootstrap-alert.js"></script>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="alert alert-success">成功！很好地完成了提交。</div>
        <div class="alert alert-info">信息！请注意这个信息。</div>
        <div class="alert alert-warning">警告！请不要提交。</div>
        <div class="alert alert-danger">错误！请进行一些更改。</div>
    </div>

    <div class="row" style="border: dotted;border-color: #5cb85c;">
        <div class="col-lg-6 col-md-3">
            <div class="alert alert-success alert-dismissable">
                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                    &times;
                </button>
                成功，很好的完成了提交
            </div>
        </div>

        <div class="col-lg-6 col-md-3">

            <div class="alert alert-info alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                信息！请注意这个信息。
            </div>
        </div>
        <div class="col-lg-6 col-md-3">

            <div class="alert alert-warning alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                警告！请不要提交。
            </div>
        </div>
        <div class="col-lg-6 col-md-3">

            <div class="alert alert-danger alert-dismissable">
                <button type="button" class="close" data-dismiss="alert"
                        aria-hidden="true">
                    &times;
                </button>
                错误！请进行一些更改。
            </div>
        </div>


    </div>

    <div class="row">
        <div>
            带有匹配颜色的链接！！！！
        </div>
        <div class="alert alert-success">
            <a href="#" class="alert-link">成功！很好地完成了提交。</a>
        </div>
        <div class="alert alert-info">
            <a href="#" class="alert-link">信息！请注意这个信息。</a>
        </div>
        <div class="alert alert-warning">
            <a href="#" class="alert-link">警告！请不要提交。</a>
        </div>
        <div class="alert alert-danger">
            <a href="#" class="alert-link">错误！请进行一些更改。</a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-3">
            <h1>进度条</h1>
            <div class="progress">
                <div aria-valuemin="0" aria-valuemax="100" style="width: 40%" class="progress-bar progress-bar-success"
                     role="progressbar" aria-valuenow="60">
                    <span class="sr-only">40%完成(成功)</span>
                </div>
            </div>


        </div>


        <div class="col-lg-6 col-md-3">
            <div class="progress">
                <div class="progress-bar progress-bar-danger" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 10%;">
                    <span class="sr-only">10% 完成（危险）</span>
                </div>
            </div>

        </div>
        <div class="col-lg-6 col-md-3">
            <div class="progress">
                <div class="progress-bar progress-bar-warning" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 20%;">
                    <span class="sr-only">20% 完成（警告）</span>
                </div>
            </div>

        </div>
        <div class="col-lg-6 col-md-3">
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-info" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 30%;">
                    <span class="sr-only">30% 完成（信息）</span>
                </div>
            </div>

        </div>

    </div>

    <div class="row">
        <div class="col-lg-6 col-md-3">
            <span class="bg-success">媒体对象</span><br>
            <div class="media">
                <a href="#" class="media-left">
                    <img src="/img/1.png" class="media-object" alt="媒体对象">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">媒体标题</h4>
                    <p>
                        这是什么图片呢？？？？？？？？？
                    </p>
                </div>
            </div>
            <div class="media">
                <a class="media-left" href="#">
                    <img src="/img/2.png" alt="图片" class="media-object" style="width: 80%;height: 80%;">
                </a>
                <div class="media-body">
                    <h4 class="media-heading">媒体标题</h4>
                    112
                </div>
            </div>

        </div>

        <div class="col-lg-6 col-md-3">
            <span>列表组</span>
            <ul class="list-group">
                <li class="list-group-item">
                    免费域名注册
                    <span class="badge">新</span>
                </li>
                <li class="list-group-item">免费 Window 空间托管</li>
                <li class="list-group-item">图像的数量</li>
                <li class="list-group-item">24*7 支持</li>
                <li class="list-group-item">每年更新成本</li>
            </ul>

            <a href="#" class="list-group-item active">
                免费域名注册
            </a>
            <a href="#" class="list-group-item">24*7 支持</a>
            <a href="#" class="list-group-item">免费 Window 空间托管</a>
            <a href="#" class="list-group-item">图像的数量</a>
            <a href="#" class="list-group-item">每年更新成本</a>
        </div>

        <div class="col-lg-6 col-md-3">
            <span>面板</span>
            <div class="panel panel-default">
                <div class="panel-heading">
                    不带title
                </div>
                <div class="panel-body">
                    面板内容
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-3">
            <span>面板</span>
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h1 class="panel-title">
                        面板带title
                    </h1>

                </div>
                <div class="panel-body">
                    面板内容
                </div>
            </div>

            <span>面板带语境色彩</span>
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">面板标题</h3>
                </div>
                <div class="panel-body">
                    这是一个基本的面板
                </div>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">面板标题</h3>
                </div>
                <div class="panel-body">
                    这是一个基本的面板
                </div>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">面板标题</h3>
                </div>
                <div class="panel-body">
                    这是一个基本的面板
                </div>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <h3 class="panel-title">面板标题</h3>
                </div>
                <div class="panel-body">
                    这是一个基本的面板
                </div>
            </div>
            <div class="panel panel-danger">
                <div class="panel-heading">
                    <h3 class="panel-title">面板标题</h3>
                </div>
                <div class="panel-body">
                    这是一个基本的面板
                </div>
            </div>
        </div>



    </div>


</div>

</body>


</html>